<template>
	<view>
		<view class="main_box">
			<view class="" v-if="addressList.length > 0">
				<view class="address_detail" v-for="(item, index) in addressList" :key="index">
					<view class="address_top">{{item.area}}</view>
					<view class="address_center">
						<view class="">
							{{item.address}}
						</view>
						<view class="">
							<image style="width: 30rpx;" src="/static/img/httpindex/pay/edit.png" mode="widthFix"
								@tap="newaddress('edit',item)">
							</image>
						</view>

					</view>
					<view class="address_bottom">
						<view style="color: #121212;margin-right: 10rpx;">{{item.realname}}</view>
						<view style="margin-right: 14rpx;">
							{{item.mobile}}
						</view>
						<view class="default_tip" v-if="item.status == 1">
							默认
						</view>
					</view>
				</view>
			</view>

			<view class="white" v-else>
				<image src="@/static/img/cate/weizhi.png" mode="widthFix" style="width: 304rpx;height: 247rpx;" />
				<view class="">暂无收货地址</view>
			</view>
		</view>

		<!-- 底部固定 -->
		<view class="bottom_fixed">
			<view class="d-flex bottom_btn" @tap="newaddress('add')">
				<!-- <image src="@/static/img/cate/jia.png" mode="widthFix" style="width: 30rpx;" /> -->
				<text class="add-btn">添加地址</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '收货地址',
				addressList: []
			}
		},
		onLoad() {
			//判断是否登录
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			this.loadData();
			uni.$on('changeAddress', () => {
				this.loadData();
			})
		},

		computed: {
			...mapState(['hasLogin']),
		},

		methods: {
			async loadData() {
				let dataObj = {
					token: uni.getStorageSync('token')
				}
				let res = await this.$myRequest({
					url: '/getAllAddress',
					data: dataObj,
					methods: 'post'
				})

				this.addressList = res.data.data;
			},
			//选择地址
			// checkAddress(item) {
			// 	if (this.source == 1) {
			// 		//this.$api.prePage()获取上一页实例，在App.vue定义
			// 		this.$api.prePage().addressData = item;
			// 		uni.navigateBack({
			// 			delta: 1
			// 		})
			// 	}
			// },

			newaddress(type, item = {}) {
				uni.navigateTo({
					url: `/pages/user/newaddress?type=${type}&data=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.main_box {
		padding: 0 30rpx;
	}

	.address_detail {
		padding: 30rpx 20rpx;
		background: #fff;
		border-radius: 10rpx;
		margin-top: 10rpx;
	}

	.address_top {
		font-size: 22rpx;
		// zoom: 0.85;
		color: #999;
	}

	.address_center {
		font-size: 28rpx;
		color: #121212;
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.address_bottom {
		color: #999;
		font-size: 26rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.default_tip {
		color: #fff;
		font-size: 26rpx;
		zoom: .7;
		background: linear-gradient(to right, #FF403C, #FF6C00);
		border-radius: 8rpx;
		padding: 6rpx 10rpx;
	}

	.bottom_fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		background: #f5f5f5;
	}

	.bottom_btn {
		background: #FF6C00;
		border-radius: 10rpx;
		color: #fff;
		font-size: 24rpx;
		padding: 24rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.add-btn {
		color: #fff;
		font-size: 28rpx;
		font-weight: 600;
	}

	.white {
		margin: 200rpx 0rpx;
		text-align: center;
		letter-spacing: 2rpx;
	}
</style>